<template>
  <van-config-provider> 
    <router-view v-slot="{ Component }">
      <!-- <Head></Head> -->
      <keep-alive>
        <transition :name="fadeName">
          <component :is="Component" class="routerLink" />
        </transition>
      </keep-alive>
    </router-view>
  </van-config-provider>
</template>

<script setup lang="ts">
import router from "./router";
import { initUser } from "./utils/tool";
const fadeName = ref("");

router.beforeEach((to: any, from: any) => {
  if (to.meta.vertical || from.meta.vertical) {
    if (to.meta.index > from.meta.index) {
      // 设置动画名称
      fadeName.value = "trans-up";
    } else {
      fadeName.value = "trans-down";
    }
  } else {
    if (to.meta.index > from.meta.index) {
      // 设置动画名称
      fadeName.value = "slide-left";
    } else {
      fadeName.value = "slide-right";
    }
  }
});

onMounted(() => {
  initUser();
});
</script>

<style>
:root:root {
  --van-nav-bar-icon-color: #333333;
  --van-nav-bar-text-color: #333;
  --van-button-primary-background: rgba(255, 191, 24, 0.2);
  --van-button-primary-border-color: rgba(255, 191, 24, 0.2);
  --van-button-primary-color: #ffbf16;
  --van-button-success-background: #ffbf16;
  --van-button-success-border-color: #ffbf16;
  --van-button-default-background: #e4e4e4;
  --van-button-default-border-color: #e4e4e4;
  --van-button-default-color: #fff;
  --van-button-default-height: 27px;
  --van-button-default-line-height: 27px;
  --van-button-normal-padding: 0 5px;
  --van-button-normal-font-size: 12px;
}
</style>
